
<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>			        
    	<h3 class="modal-title"></h3>
    </div>
    <div class="modal-body"><div class="modal-image"></div></div>
    <div class="modal-footer">			    			    			    
    
    	<g:if test="${addToCartVisibility}"> 
    		<!-- TODO: Refactor . Si se cambia el id revisar tmb el controller de AlbumShow -->
	        <button id="btn_addToShoppingCart" class="btn modal-shopping-cart">
	            <i class="icon-shopping-cart"></i>
	            <span><g:message code="common.addToShoppingCart"/></span>
	        </button>
        </g:if>
        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
            <i class="icon-play icon-white"></i>
            <span><g:message code="common.presentation"/></span>
        </a>
        <a class="btn btn-info modal-prev">
            <i class="icon-arrow-left icon-white"></i>
            <span><g:message code="common.previous"/></span>
        </a>
        <a class="btn btn-primary modal-next">
            <span><g:message code="common.next"/></span>
            <i class="icon-arrow-right icon-white"></i>
        </a>
    </div>
</div>

<g:javascript src="load-image.min.js" />	
<g:javascript src="bootstrap-image-gallery.min.js" />
<!-- Bootstrap Image Gallery styles -->
<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap-image-gallery.min.css')}" type="text/css" />

<script>

	$(function () {	
					
	    'use strict';
	
	    // Start slideshow button:
	    $('#start-slideshow-show,#start-slideshow-edit').button().click(function () {
	        var options = $(this).data(),
	            modal = $(options.target),
	            data = modal.data('modal');
	        if (data) {
	            $.extend(data.options, options);
	        } else {
	            options = $.extend(modal.data(), options);
	        }
	        modal.find('.modal-slideshow').find('i')
	            .removeClass('icon-play')
	            .addClass('icon-pause');
	        modal.modal(options);
	    });
	
	    // Toggle fullscreen button:
	    $('#toggle-fullscreen').button().click(function () {
	        var button = $(this),
	            root = document.documentElement;
	        if (!button.hasClass('active')) {
	            $('#modal-gallery').addClass('modal-fullscreen');
	            if (root.webkitRequestFullScreen) {
	                root.webkitRequestFullScreen(
	                    window.Element.ALLOW_KEYBOARD_INPUT
	                );
	            } else if (root.mozRequestFullScreen) {
	                root.mozRequestFullScreen();
	            }
	        } else {
	            $('#modal-gallery').removeClass('modal-fullscreen');
	            (document.webkitCancelFullScreen ||
	                document.mozCancelFullScreen ||
	                $.noop).apply(document);
	        }
	    });			  
	    
	});
</script>